<template>
  <section class="online-sale-detail">
    <div class="naviga">数据采集&nbsp;>&nbsp;线上舆情数据&nbsp;>&nbsp;产品信息
      <a href="#/full/menu/DAQOnlineSale" class="el-icon-close"
         style="font-size: 22px;line-height:35px;font-weight:600;float: right;margin-right: 30px;"></a>
    </div>
    <div class="table-comment ">
      <div class="box">
        <div class="title">累计评价(<span class="blue">{{totalCom}}</span>)</div>
        <div class="comment-box">
          <ul  v-if="!!listData && listData.length>0">
            <li class="comment-detail" v-for="item in listData">
              <div>{{item.sentimentComment}}</div>
                  <span class="comment-detail-imgs" v-for="(item, index) in item.pictureArr">
                    <img :src="item" :alt="'评论图'+index">
                  </span>
              <div class="comment-detail-band">
                套餐类型：{{item.menu || "暂无"}} &nbsp;&nbsp;颜色：{{item.colorClassify || "暂无"}}
                <span class="right">{{ item.sentimentTime|fdate}}</span>
              </div>
            </li>
          </ul>
          <div v-else style="padding: 20px;border-bottom: 1px solid #efefef">暂无数据</div>
          <el-pagination
            style="padding: 20px"
            background
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="detail ">
      <div class="box">
        <ul class="tab clearfix">
          <li class="tab-title " v-for="(item,idx) in ['产品基本销售信息','产品规格']"
              :class="{'is-active':idx == activeTab}"
              @click="changeActive(idx)">{{item}}
          </li>
        </ul>
        <div class="tab-des " v-show="activeTab==0">
          <ul class="des">
            <li class="des-info">
              <div class="des-title">产品名称：</div>
              <div class="des-main">{{basicInfo.productName}}</div>
            </li>
            <li class="des-info">
              <div class="des-title">产品型号：</div>
              <div class="des-main">{{basicInfo.productCode}}</div>
            </li>
            <li class="des-info">
              <div class="des-title">产品标题：</div>
              <div class="des-main">{{basicInfo.productTitle}}</div>
            </li>
            <li class="des-info">
              <div class="des-title">产品副标题：</div>
              <div class="des-main">{{basicInfo.productSubTitle}}</div>
            </li>
            <li class="des-info">
              <div class="des-title">活动：</div>
              <div class="des-main">{{basicInfo.promotion}}</div>
            </li>
            <li class="des-info">
              <div class="des-title">价格：</div>
              <div class="des-main">{{basicInfo.price}}</div>
            </li>
            <li class="des-info">
              <div class="des-title">颜色：</div>
              <div class="des-main">{{basicInfo.color}}</div>
            </li>
            <li class="des-info">
              <div class="des-title">月销量：</div>
              <div class="des-main">{{basicInfo.salesCount}}</div>
            </li>
            <li class="des-info">
              <div class="des-title">标题图片列表：</div>
              <div class="des-main" v-for="(item, index) in basicInfo.titlePictureList">
               <img :src="item" :alt="'标题图'+index">
            </div>
            </li>
            <li class="des-info">
              <div class="des-title">其他图片列表：</div>
              <div class="des-main" v-for="(item, index) in basicInfo.otherPictureList">
                <img :src="item" :alt="'其他图'+index">
              </div>
            </li>
          </ul>
        </div>
        <div class="tab-des" v-show="activeTab==1">
          <div class="ta">
            <div v-for="(value, key, index) in specification" style="margin-bottom: 20px;border: 1px solid #ddd">
              <div class="ta-head">{{key}}</div>
              <div v-for="(a,b,c) in value">
                <div v-if="typeof(a)==='object'" class="ta-title">{{b}}</div>
                <div v-if="typeof(a)==='string'">
                  <ul>
                    <li>
                      <div class="ta-col1 des-title">{{b}}</div>
                      <div class="ta-col2 des-main">{{a}}</div>
                    </li>
                  </ul>
                </div>
                <ul>
                  <li v-if="typeof(a)==='object'" v-for="(d,e,f) in a">
                    <div class="ta-col1 des-title">{{e}}</div>
                    <div class="ta-col2 des-main">{{d}}</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<style lang="less" scoped>
  .online-sale-detail {
    width: 100%;
  }

  .table-comment {
    width: 65%;
    float: left;
    padding: 15px;
  }

  .detail {
    width: 33%;
    float: left;
    padding: 15px 0;
  }

  .box {
    background: #fff;
    border: 1px solid #efefef;

  }

  .detail > .box {
    height: 100%;
  }

  .title {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    font-weight: 500;
    padding: 0 10px;
    border-bottom: 1px solid #efefef;
  }

  .comment-box {
    max-height: 700px;
    overflow-y: auto;
  }

  .comment-detail {
    border-bottom: 1px solid #efefef;
    padding: 10px;
  }

  .comment-detail-imgs img {
    max-width: 100px;
    max-height: 100px;
    border: 1px solid #efefef;
    margin: 10px 10px 10px 0;
  }
.comment-detail-band{
  color:#999
}
  .tab li {
    float: left;
    box-sizing: border-box;
    width: 50%;
    height: 50px;
    background: #f6f6f6;
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
    font-size: 18px;
    line-height: 50px;
    font-weight: 500;
    text-align: center;
    word-break: break-all;
    word-wrap: break-word;
    cursor: pointer;
  }

  .tab li:last-child {
    /*border-right: 1px solid #ddd;*/
  }

  .tab li.is-active {
    background: #fff;
    border-top: 2px solid #03a9f4;
    border-bottom: 0;
    color: #03a9f4;
    cursor: default;
  }

  .des-info {
    margin: 1rem;
    display: flex;
  .des-title{
    text-align: right;
  }
  }
  .des-info div{
   /* display: inline-block;
    box-sizing: border-box;*/
    width: 45%;
    word-wrap: break-word;
    word-break: break-all;
  }
  .des-info div:last-child{
    /* display: inline-block;
     box-sizing: border-box;*/
    width: 55%;
  }
  .des-title {
    color: #999;
  }

  .des-main img {
    max-width: 100px;
    max-height: 100px;
    border: 1px solid #efefef;
    margin: 10px 10px 10px 0;
  }

  .ta {
    margin: 15px;
  }

  .ta-head, .ta-title {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: 500;
    padding-left: 15px;
  }

  .ta-head {
    background: #ebebeb;
    color: #a3a3a3;
  }

  .ta-title {
    border-top: 1px solid #ddd;
    background: #f6f6f6;
  }

  .ta ul li {
    font-size: 12px;
    border-top: 1px solid #ddd;
    line-height: 30px;
    box-sizing: border-box;
    height: 30px;
    div{
      text-align: right;
      float: left;
      width: 50%;
      height: 100%;
    padding:0 4px;
      &:last-child{
    text-align: left;
       }
    }
  }

  .ta-col1 {
    border-right: 1px solid #ddd;
  }

  .clearfix::after {
    content: '\200B';
    display: block;
    height: 0;
    clear: both;
  }

  .clearfix {
    *zoom: 1;
  }

  /*IE/7/6*/
  .blue {
    color: #03a9f3;
  }

  .right {
    float: right;
  }

  .normal {
    font-size: 14px;
  }

  .point {
    cursor: pointer;
  }

  .gradient-btn {
    color: #fff;
    background: linear-gradient(left, #04d6e5, #03a9f3);
    padding: 6px 10px;
    border-radius: 5px;
  }
</style>
<script type="es6">
  export default {
    data() {
      return {
        total: 0,
        totalCom:0,
        pSize: 10,
        currentPage: 1,
        activeTab: 0, //1
        listData: [],
        basicInfo: {},
        dataStr:"",
        specification:{},
        formInline:{
          "shopId":Number(this.$route.params.shopId),
          "productId":Number(this.$route.params.productId),
          "pageNo":0,
          "pageSize":10,
      }
      }
    },
    mounted(){
      this.getTableData();
      this.getBasicInfo();
      this.getSpecification();
    },
    methods: {
      //表格
      getTableData(){
        let params = {
          "method":"getOnlineSalesSentiment",
          "query":this.formInline
        }
        this.$http.post(this.GLOBAL.host, params)
          .then((res) => {
            this.listData = res.data.data;
            this.totalCom=res.data.total
          })
          .catch((error) => {
            this.listData = [];
            this.totalCom=0
          });
      },
      //产品基本销售信息
      getBasicInfo(){
        let params = {
          "method":"getOnlineSalesProductSaleInfo",
          "query":{
            "shopId":Number(this.$route.params.shopId),
            "productId":Number(this.$route.params.productId)
          }
        }
        this.$http.post(this.GLOBAL.host, params)
          .then((res) => {
            this.basicInfo = res.data.data;
          })
          .catch((error) => {
            this.basicInfo = [];
          });
      },
      //产品规格
      getSpecification(){
        this.$http.post(this.GLOBAL.host, {
          "method":"getOnlineSalesProductSpecification",
          "query":{
            "shopId":Number(this.$route.params.shopId),
            "productId":Number(this.$route.params.productId)
          }
        })
          .then((res) => {
            this.dataStr = res.data.data;
            if(!!this.dataStr) {
              this.getSpecificationData()
            }
          })
          .catch((error) => {
            this.categorySelectData = [];
          });
      },
      changeActive(val){
        this.activeTab = val;
      },
      getSpecificationData(){
        this.specification = JSON.parse(this.dataStr);
        console.log(this.specification)
      },
      //页数
      handleSizeChange(val) {
        this.pSize = val;
        this.formInline.pageSize= val - 1;
        this.getTableData();
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getTableData();
      }
    }
  };
</script>
